<template>
	<view class="container">
		<view class="header">
			<image mode="aspectFill" @click="updateImage" :src="unserInfo.imgurl" class="avatar"></image>
		</view>
		<view>
			<view class="form-item">
				<text>我的名字</text>
				<input class="input" v-model="unserInfo.username" type="text" placeholder="用户名" />
			</view>

			<view class="form-item">
				<text>我的年龄</text>
				<input class="input" v-model="unserInfo.age" type="text" placeholder="用户名" />
			</view>

			<view class="form-item">
				<text>我的性别</text>
				<picker class="input" :value="genderIndex" :range="genderArray" @change="onGenderChange">
					<view class="picker">{{ genderArray[genderIndex] }}</view>
				</picker>
			</view>

			<view class="form-item">
				<text>个人喜好</text>
				<textarea class="love-editor" v-model="unserInfo.favorite" type="text" placeholder="爱好" />
			</view>

			<view class="form-item">
				<text>自我介绍</text>
				<textarea class="love-editor" v-model="unserInfo.describe" type="text" placeholder="自我介绍" />
			</view>
			<view class="submit">
				<button @click="updateUserInfo">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config';
	export default {
		data() {
			return {
				genderArray: ['女', '男'],
				genderIndex: this.$global.personInfo.gender,
				selectedGender: '',
				unserInfo: {
					imgurl: "",
					age: "",
					username: "",
					favorite: "",
					describe: ""
				},
			}
		},
		methods: {
			onGenderChange(event) {
				this.genderIndex = event.mp.detail.value;
				this.selectedGender = this.genderArray[this.genderIndex];
			},
			onLoad() {
				const that = this;
				uni.request({
					url: config.baseUrl + 'user/getUserInfo',
					method: 'POST',
					data: {
						'openid': this.$global.personInfo.openid
					},
					success: (res) => {
						// console.log(res.data.data);
						that.unserInfo.imgurl = config.baseUrl + res.data.data.imgurl;
						that.unserInfo.username = res.data.data.username;
						that.unserInfo.age = res.data.data.age;
						that.unserInfo.favorite = res.data.data.favorite;
						that.unserInfo.describe = res.data.data.describe;
						// console.log(that.unserInfo);
					}
				})
			},
			updateUserInfo() {
				// console.log(this.unserInfo);
				const that = this;
				let url = that.unserInfo.imgurl;
				let temp = url.indexOf('personImage/');
				if (temp !== -1) {
					url = url.substring(temp);
				}
				uni.request({
					url: config.baseUrl + 'user/updateUserInfo',
					method: 'POST',
					data: {
						openid: that.$global.personInfo.openid,
						imgurl: url,
						username: that.unserInfo.username,
						gender: that.genderIndex,
						age: that.unserInfo.age,
						favorite: that.unserInfo.favorite,
						describe: that.unserInfo.describe,
					},
					success: (res) => {
						// console.log(res);
						if (res.statusCode == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '修改出错',
								icon: 'error'
							})
						}
					}
				})
			},
			updateImage() {
				const that = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						// console.log(chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const imgName = chooseImageRes.tempFiles[0].name;
						// console.log(type);
						uni.uploadFile({
							url: config.baseUrl + 'person/updateImage',
							filePath: tempFilePaths[0],
							formData: {
								'openid': that.$global.personInfo.openid,
								'imgName': imgName
							},
							success: (res) => {
								// console.log(res);
								this.unserInfo.imgurl = res.data
								console.log(this.unserInfo.imgurl);
							}
						});
					}
				});
			}
		}
	};
</script>

<style>
	.submit {
		text-align: center;
		margin-top: 50rpx;
	}

	.submit button {
		background-color: #ffd5c0;
		/* 设置按钮背景色 */
		color: #2e3058;
		/* 设置文字颜色 */
		padding: 10px 20px;
		/* 设置按钮内边距 */
		border: none;
		/* 移除按钮边框 */
		border-radius: 5px;
		/* 设置按钮圆角 */
		cursor: pointer;
		/* 设置鼠标悬停样式 */
		font-size: 16px;
		/* 设置文字大小 */
		width: 300rpx;
	}

	/* 当鼠标悬停在按钮上时的样式 */
	.submit button:hover {
		background-color: #45a049;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-top: 50rpx;
		margin-left: 70rpx;
	}

	.input {
		margin-left: 30rpx;
		border-bottom: #636160 solid 1rpx;
	}

	.love-editor {
		width: 200px;
		margin-left: 30rpx;
		height: 100px;
		border-bottom: #636160 solid 1rpx;
	}

	.container {
		padding-top: 20rpx;
		background: linear-gradient(to bottom, #FFDAB9, #FFF8DC);
		/* 从上往下变淡的橘色渐变 */
		background: linear-gradient(to right, #FFDAB9, #FFF8DC);
		height: 98vh;
		/* 设置容器高度为100%视口高度 */
	}


	.header {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar {
		width: 260rpx;
		height: 260rpx;
		border-radius: 50%;
	}

	.username {
		margin-left: 20rpx;
		font-size: 32rpx;
		color: #333;
	}

	.section {
		background-color: #fff;
	}

	.item {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.text {
		font-size: 32rpx;
		color: #333;
	}

	.divider {
		height: 1rpx;
		background-color: #eee;
	}
</style>